<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>大转盘</title>
    <link rel="stylesheet" href="./css/common.css" />
    <link rel="stylesheet" href="./css/index.css" />
</head>

<body>
    <div id="app">
        <div class="bg" :style="styles.bgStyle">
            <div class="rule-box">
                我的奖品
            </div>
            <!-- title -->
            <div class="title-img"></div>
            <!-- 转盘的盒子 -->
            <div class="turntable" :style="styles.turntableStyle">
                <!-- 按钮 -->
                <div class="turntable-submit" @click="submit"></div>
                <!-- 旋转的盒子 -->
                <div class="turntable-box">
                    <!-- 背景 -->
                    <div class="turntable-warp" :style="styles.turntableWarpStyle">
                        <div class="line" v-for="(item,index) in list"
                            :style="{transform:`translate(-50%, -50%) rotate(${degrees*index}deg)`,...styles.lineStyle}">
                        </div>
                        <div class="item" v-for="(item,index) in list"
                            :style="{transform:`translate(-50%, -50%) rotate(${degrees*index-degrees/2}deg)`}">
                            <!-- <img :src="item.imgscr" :style="styles.imgStyle" alt="" /> -->
                            <p style="font-size: 0.22rem;">{{item.text}}</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="bottomBox">
                <img src="https://static.vipgogo.com/kxf/chinaBank/doubleEleven/bigDialOuterPrize/bigDialPedestal.png"
                    class="bigDialPedestal" alt="" />
                <img src="https://static.vipgogo.com/kxf/chinaBank/doubleEleven/img/bigDialBluePerson.png"
                    class="bigDialBluePerson" alt="" />
                <img src="https://static.vipgogo.com/kxf/chinaBank/doubleEleven/img/bigDialBottomGoldCoin.png"
                    class="bigDialBottomGoldCoin" alt="" />
                <img src="https://static.vipgogo.com/year2020/106/ac/gonshang/02/images/person2.png"
                    class="bigDialWhitePerson" alt="" />
                <img src="https://static.vipgogo.com/year2020/106/ac/gonshang/02/images/prize2.png"
                    class="bigDialHwGoldCoin" alt="" />
                <img src="https://static.vipgogo.com/kxf/chinaBank/doubleEleven/img/bigDialShoppingBag.png"
                    class="bigDialShoppingBag" alt="" />
            </div>


        </div>
    </div>
</body>

<script src="./js/rem2.min.js"></script>
<script src="./js/zepto.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<script>
    var app = new Vue({
        el: "#app",
        data: {
            // index: 5, //中奖下标
            degrees: 0,
            start_rotating_degree: 0, //初始旋转角度
            speed: 5, //至少多少圈
            speedRate: 1000, //每一圈执行毫秒
            click_flag: true,
            perCount: 0, //累计多少参加
            tabsActive: null, //tab切换
            myPrizeList: [{
                name: "200元话费"
            },
            {
                name: "200元话费"
            },
            {
                name: "200元话费"
            },
            {
                name: "200元话费"
            },
            {
                name: "200元话费"
            },
            {
                name: "200元话费"
            }
            ], //"我的中奖列表"
            list: [{
                imgscr: "https://res2.eqh5.com/o_1djghbi5s2sb10o2e8ed3i5al9.png?imageMogr2/crop/!160x160a0a0",
                text: "一等奖",
                type: 1
            },
            {
                imgscr: "https://res2.eqh5.com/o_1djghc06lrdb1qa227pkcq1jkt9.png?imageMogr2/crop/!160x160a0a0",
                text: "二等奖",
                type: 5,
            },
            {
                imgscr: "https://res2.eqh5.com/FnHozPrkDJJ0Z9G20bnQRaJnAPVV?imageMogr2/crop/!160x160a0a0",
                text: "三等奖",
                type: 15,
            },
            {
                imgscr: "https://res2.eqh5.com/o_1djghccab1j401hpb1m441d0v1eca9.png?imageMogr2/crop/!159x159a1a1",
                text: "四等奖",
                type: 35,
            },
            {
                imgscr: "https://res2.eqh5.com/FmQoazUjpxRxOnigexJBn_aauRrq?imageMogr2/crop/!160x160a0a0",
                text: "五等奖",
                type: 50
            },
            {
                imgscr: "https://res2.eqh5.com/Fl0rbUtXOsHSHm3QOjuOu4A2qgIU?imageMogr2/crop/!160x160a0a0",
                text: "谢谢参与",
                type: 100,
            },
                // {
                //     imgscr: "https://res2.eqh5.com/o_1e861smjq1cehi52fh4lfg4tq11.png?imageMogr2/crop/!160x160a0a0",
                //     text: "七等奖"
                // },
                // {
                //     imgscr: "https://res2.eqh5.com/o_1e861smjq1h7u1o9b13i61l2captv.png?imageMogr2/crop/!160x160a0a0",
                //     text: "八等奖"
                // }
            ],
            styles: {
                turntableStyle: {
                    top: ""
                },
                turntableBoxStyle: {

                },
                turntableWarpStyle: {
                    background: "url('https://res2.eqh5.com/o_1djghah6t1r2g14ecjnr1kjo14fr9.png?imageMogr2/crop/!626x626a0a0') no-repeat",
                    backgroundSize: "100% 100%"
                },

                lineStyle: {
                    backgroundColor: "#ccc",
                    width: "2px"
                },
                imgStyle: {
                    height: "1.5rem",
                    width: "1.5rem"
                },
                myPrizeStyle: {
                    height: "1.2rem",
                    width: "1.2rem",
                    zIdex: "30",
                    imgSrc: "https://res2.eqh5.com/o_1di4nsvan119d1bt859616ls73ea.png"
                },
                ruleBox: {
                    height: "1.2rem",
                    width: "1.2rem",
                    imgSrc: "https://res2.eqh5.com/o_1djnqg1hb2qp10sl14h41pml1qtd9.png?imageMogr2/crop/!130x130a0a0"
                },
                perTextStyle: {
                    top: "12rem",
                    left: "0rem",
                    color: "#000"
                }
            }
        },
        methods: {
            rotating(index) {
                //现在转圈转弯再试
                const rotatDeg = this.start_rotating_degree + this.speed * 360;
                const indexDeg = -index * this.degrees - this.degrees / 2; //中奖的度数
                $(".turntable-box").css({
                    transition: `all ${this.speed * this.speedRate}ms ease`,
                    transform: `rotate(${rotatDeg + indexDeg}deg)`
                });
                setTimeout(() => {
                    this.game_over(index);
                    this.start_rotating_degree = rotatDeg;
                    this.click_flag = true;
                }, this.speed * this.speedRate + 200);

                // 360%  / 奖品数  == 每一个所在的 度数
            },
            submit() {
                if (this.click_flag) {
                    // 请求中奖的下标
                    const index = GetRandomNum(0, 100);
                    this.click_flag = false; //执行动画中 加锁
                    console.log(index)
                    if (index == 1) {
                        this.rotating(0);
                    } else if (index > 1 && index <= 5) {
                        this.rotating(1);
                    } else if (index > 5 && index <= 15) {
                        this.rotating(2);
                    } else if (index > 15 && index <= 35) {
                        this.rotating(3)
                    } else if (index > 35 && index <= 50) {
                        this.rotating(4)
                    } else if (index > 50 && index <= 100) {
                        this.rotating(5)
                    }
                }
            },
            game_over(index) {
                // 游戏结束
                alert(`恭喜您中${this.list[index].text}游戏结束`);
            },
            clearPrize() {
                $("#popup-prize").hide();
            },
            mask() {
                $(" #popup-dom .mask").fadeOut();
                $(".popup").addClass("slideOutDown");
            },
            fade(tabsActive) {
                this.tabsActive = tabsActive;
                $(" #popup-dom .mask").fadeIn();
                $(" #popup-dom .popup").removeClass("slideOutDown");
                $("#popup-dom .popup").addClass("slideInUp");
                $("#popup-dom .popup").css({
                    display: "block"
                });
            }
        },
        mounted() {
            $(".turntable-box").css({
                transform: `rotate(${this.start_rotating_degree}deg)`
            });
        },
        created() {
            // 初始化选择度数
            this.start_rotating_degree = this.degrees = 360 / this.list.length;
            var num = "07011001";

        },
        watch: {

        }
    });

    function GetRandomNum(Min, Max) {
        var Range = Max - Min;
        var Rand = Math.random();
        return (Min + Math.round(Rand * Range));
    }
  // $.toast("系统繁忙");
</script>

</html>